// 引入全局变量 - 使用@use替代@import
@use './variables' as var;
// 引入sass内置模块
@use 'sass:color';

// 基础重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var.$font-family;
  font-size: var.$font-size-base;
  color: var.$text-primary;
  background-color: var.$bg-color;
  line-height: 1.5;
}

// 清除浮动
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

// 通用类
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-1 {
  flex: 1;
  overflow: hidden;
}

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }

.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }

// 内容区域样式
.content-container {
  padding: var.$content-padding;
  height: 100%;
  overflow-y: auto;
}

// 页面标题样式
.page-title {
  font-size: var.$font-size-lg;
  color: var.$primary-dark;
  font-weight: 500;
  margin-bottom: var.$content-padding;
  display: flex;
  align-items: center;

  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: var.$primary-color;
    margin-right: 8px;
    border-radius: 2px;
  }
}

// 卡片样式覆盖
.el-card {
  border-radius: var.$border-radius;
  box-shadow: var.$shadow;
  border: none;

  .el-card__header {
    padding: 14px 20px;
    border-bottom: 1px solid var.$border-color;
    background-color: var.$card-bg;
  }

  .el-card__body {
    padding: 20px;
  }
}

// 表格样式覆盖
.el-table {
  border-radius: var.$border-radius;
  overflow: hidden;

  th {
    background-color: var.$primary-light !important;
    color: var.$primary-dark !important;
    font-weight: 500;
  }
}

// 按钮样式覆盖
.el-button--primary {
  background-color: var.$primary-color;
  border-color: var.$primary-color;

  &:hover, &:focus {
    // 使用新的color.adjust替代deprecated的darken()
    background-color: color.adjust(var.$primary-color, $lightness: -10%);
    border-color: color.adjust(var.$primary-color, $lightness: -10%);
  }
}

// 面包屑样式
.el-breadcrumb {
  margin-bottom: var.$content-padding;
  font-size: var.$font-size-sm;

  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: var.$text-secondary;
    font-weight: normal;
  }
}

// 分页样式
.pagination-container {
  margin-top: 20px;
  text-align: center;
}

// 响应式调整
@media (max-width: 768px) {
  $content-padding: 10px;

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .el-input {
    width: 100% !important;
    margin-bottom: 10px !important;
  }


}
    